<template>
	<view class="list-item-container">
		<scroll-view scroll-y="true" class="scroll-container" @scrolltolower="_get_article">
			<view>
				<ListCard v-for="(item,index) in article_list" :card="item" :key="item.id" />
			</view>
			<uni-load-more :status="more" v-if="!is_search" />
		</scroll-view>
	</view>
</template>

<script>
	export default {
		name: "ListItem",
		props: {
			cate: {
				type: String,
				default: '全部'
			},
			is_active: Boolean,
			is_init: Boolean,
			is_search: Boolean,
			search_list: {
				type: Array,
				default: () => ([])
			}
		},
		data() {
			return {
				article_list: [],
				page: 1,
				total: 1,
				more: 'more'
			};
		},
		methods: {
			async _get_article() {
				// 如果数据已满或正在加载中，就跳过
				if (this.article_list.length >= this.total || this.more === 'loading') return;
				this.more = 'loading'
				const {
					article_list,
					total
				} = await this.$http.get_article_list({
					classify: this.cate,
					page: this.page
				})
				this.page++
				this.total = total
				this.article_list.push(...article_list)
				if (this.article_list.length >= total) {
					this.more = 'noMore'
				} else {
					this.more = 'more'
				}
			}
		},
		created() {
			if (this.is_init) {
				this._get_article()
			}
			if (this.is_search) {
				this.article_list = this.search_list
			}
		},
		watch: {
			is_active(val) {
				if (val && this.article_list.length === 0 && this.total !== 0) {
					this._get_article()
				}
			},
			search_list(val) {
				this.article_list = val
			}
		}
	}
</script>

<style lang="scss">
	.list-item-container {
		height: 100%;
		background-color: #eee;

		.scroll-container {
			height: 100%;
		}
	}
</style>
